<template>
    <div class="check">
        <order-details :order-detail="orderDetailData"></order-details>
    </div>
</template>

<script>
    import OrderDetails from './OrderDetail.vue';
    export default {
        name: 'order-detail',
        components: {
            OrderDetails
        },
        data() {
            return {
                // orderDetailApi: 'express/order/1',
                orderDetailData: {}
            }
        },
        mounted() {
            this.getOrderDetail();
        },
        computed: {
            dataRefreshEvents() {
                return this.$store.state.num;
            },
            id: function (value) {
                return this.$route.params.id
            }
        },
        watch: {
            "$route":"getOrderDetail",    //后面是methods中的一个方法
            dataRefreshEvents: function () {
                this.getOrderDetail();
            }
        },
        methods: {
            getOrderDetail() {
                this.$http.get('express/order/' + this.id)
                    .then((response) => {
                        this.orderDetailData = response.data.data;
                    })
                    .catch((error) => {
                        if(error.response.data.msg){
                            this.$message.error(error.response.data.msg);
                        }else{
                            this.$message.error('请求错误：'+error.response.status);
                        }
                    });
            }
        }
    }
</script>

<style scoped lang="less">
    .check{
        margin: 12px 12px;
    }
</style>
